<!-- 家长的孩子信息 -->
<template>
  <el-card>
    <template #header>
      <div><span>孩子信息</span></div>
    </template>

    <!-- 孩子列表 -->
    <el-table :data="childList" style="width: 100%">
      <el-table-column label="姓名" prop="name" align="center"> </el-table-column>
      <el-table-column label="学生身份证号" prop="studentCardId" align="center"></el-table-column>
      <el-table-column label="性别" prop="sex" align="center"> </el-table-column>
      <el-table-column label="住址" prop="domicile" align="center"> </el-table-column>
      <el-table-column label="生日" prop="birthday" align="center"> </el-table-column>
      <el-table-column label="家长身份证号" prop="parentCardId" align="center"></el-table-column>
      <el-table-column label="家长手机号" prop="parentPhone" align="center"> </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template #default="{ row }">
          <el-button link type="success" @click="lookStudentInfoId(row)">查看</el-button>
          <el-button link type="info" @click="updateStudent(row)">修改</el-button>
          <el-button link type="danger" @click="deleteStudentId(row)">删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
      v-show="total > 0"
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />

    <lookStudetInfo ref="lookStudetInfoRef" @getInfo="getStudentList"></lookStudetInfo>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { getStudentAllLists, deleteStudent } from "@/api/student/index";
import lookStudetInfo from "@/views/family/component/lookStudetInfo.vue";
import message from "@/composable/ElMessage";
import { ElMessageBox } from "element-plus";

const childList = reactive<any[]>([]);
const total = ref(0);
const getStudentList = async () => {
  childList.length = 0;
  const { data } = await getStudentAllLists();
  childList.push(...data);
  total.value = data.length;
};

// 查询学生信息详情
const lookStudetInfoRef = ref();
const lookStudentInfoId = (row: any) => {
  const title = "查看学生信息";
  lookStudetInfoRef.value.open(title, row);
};

// 修改学生信息
const updateStudent = (row: any) => {
  const title = "修改学生信息";
  lookStudetInfoRef.value.open(title, row);
};

// 删除学生信息
const deleteStudentId = async (row: any) => {
  ElMessageBox.confirm("确定删除该学生信息吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await deleteStudent(row.id).then((res: any) => {
        if (res.code === "200") {
          message.success("删除成功");
          getStudentList();
        } else {
          message.error("删除失败");
        }
      });
    })
    .catch(() => {
      message.info("取消删除");
    });
};

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
});
const onSizeChange = (size: number) => {
  queryParams.pageSize = size;
  getStudentList();
};

const onCurrentChange = (page: number) => {
  queryParams.pageNum = page;
  getStudentList();
};

onMounted(() => {
  getStudentList();
});
</script>

<style lang="scss" scoped></style>
